<template>
  <div class="home">
    <!-- 顶部背景 -->
    <div
      class="top-bg relative h-40 -z-10 w-full bg-gradient-to-b from-blue-500 to-white"
    ></div>

    <!-- 搜索栏 -->
    <section class="search-section px-4 mt-4">
      <van-search
        v-model="searchField"
        placeholder="搜索商品、分类"
        shape="round"
        background="transparent"
        @search="onSearch"
      >
        <template #left-icon>
          <van-icon name="scan" color="#1989fa" size="1.5rem" />
        </template>
        <template #right-icon>
          <van-icon name="photo-o" color="#1989fa" size="1.5rem" />
        </template>
        <template #action>
          <van-button round type="primary" size="small" @click="onSearch">
            搜索
          </van-button>
        </template>
      </van-search>
    </section>

    <!-- 分类导航 -->
    <section class="category-grid grid grid-cols-4 gap-4 p-4">
      <div
        class="category-item flex flex-col items-center justify-center bg-white rounded-lg shadow"
        v-for="item in topBarState"
        :key="item.title"
      >
        <van-icon :name="item.icon" size="2rem" color="#1989fa" />
        <span class="text-sm mt-2">{{ item.title }}</span>
      </div>
    </section>

    <!-- 轮播图 -->
    <section class="swiper-container px-4">
      <van-swipe
        :autoplay="3000"
        lazy-render
        class="rounded-lg overflow-hidden"
      >
        <van-swipe-item v-for="(image, index) in swpiperImages" :key="index">
          <img :src="image" alt="轮播图" class="w-full h-40 object-cover" />
        </van-swipe-item>
      </van-swipe>
    </section>

    <!-- 热门商品卡片 -->
    <section class="popular-products p-4">
      <h2 class="text-lg font-semibold mb-4">热门商品</h2>
      <ViewCard :items="ViewedState" />
    </section>
  </div>
</template>

<script setup>
import ViewCard from "../../components/ViewCard.vue";
import { useHomeStore } from "../../store/homeStore";
import { toRefs, ref, computed } from "vue";
import axios from "../../api/index";

const searchField = ref(""); // 搜索框输入的内容
const ViewStateRef = ref([]); // 热门商品数据

const onSearch = () => {
  console.log("搜索内容：", searchField.value);
};

// 请求商品数据
axios.get("/findShop").then((res) => {
  ViewStateRef.value = res.data;
});

const homeStore = useHomeStore();
const { topBarState } = toRefs(homeStore);

const swpiperImages = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];

const ViewedState = computed(() => ViewStateRef.value);
</script>

<style scoped>
/* 顶部背景样式 */
.top-bg {
  border-bottom-left-radius: 50% 30px;
  border-bottom-right-radius: 50% 30px;
}

/* 分类网格样式 */
.category-item {
  height: 90px;
  transition: transform 0.2s ease-in-out;
}
.category-item:hover {
  transform: scale(1.05);
}

/* 轮播图 */
.swiper-container {
  margin-bottom: 16px;
}

/* 热门商品标题 */
.popular-products h2 {
  color: #333;
}
</style>
